<template>
    <div>
        <div class="mare" v-if="show" @click="handleShow">
            
        </div>

    </div>
</template>

<script setup>
 import { defineProps, defineEmits, ref, reactive, onMounted,defineExpose } from "vue";
 const emit = defineEmits(["cancel"])
 const show = ref(false)
 const handleShow = ()=>{
    show.value = !show.value
    console.log(show.value)
 }
 defineExpose({
    handleShow
 })
</script>

<style lang="less" scoped>
.mare{
    width: 100%;
    height: 100%;
    position: fixed;
	top:0;
    left:0;
    z-index:10;
    background:rgba(0,0,0,.5)
}

</style>